<template>
  <view class="img-bg">
    <canvas canvas-id="qrcode" :style="{width: `${size}px`, height: `${size}px`}"></canvas>
  </view>
</template>
<script>

import uQRCode from '@/components/QrCode/uqrcode'

export default {
  name: 'QrCode',
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 258
    }
  },
  data() {
    return {
      qrCode: undefined
    }
  },
  watch: {
    text: {
      immediate: true,
      handler() {
        this.createQrcode()
      }
    }
  },
  onReady() {
    this.createQrcode()
  },
  methods: {
    createQrcode() {
      uQRCode.make({
        canvasId: 'qrcode',
        text: this.text,
        size: this.size,
        success: res => {
          this.qrcodeSrc = res
        }
      })
    }

  }
}
</script>
